<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>vue学习</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			[v-cloak] {
				display: none;
			}
			.test {
				width: 300px;
				height: 300px;
				background-color: pink;
			}
			.father {
			
				background-color: antiquewhite;
			}
			.son,
			.son1 {
				width: 80px;
				height: 80px;
				background-color: aquamarine;
				border: 1px solid #FFC0CB;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<button @click="fun">{{year}}</button>
			<div class="test">
				username:<input type="text" name="" id="" value="" v-model="uname"  />
				password:<input type="text" name="" id="" value="" v-model="password"/><br>
				<input type="button" name="" id="" value="提交"  @click="send"/>
			</div>
			<div :class="{father:is}" @click="fu">
				{{msg}}
				<div :class="[son]" @click.stop="zi" >
					子元素
				</div>
				<div class="son1">
					change事件
				</div>
				<div class="son1" >
					keycode
				</div>
				<input type="text" name="" id="" value=""  @keyup.a="code"  v-model="msg"/>
				
				
			</div>
			<a href="#" @click.stop="maopao">阻止冒泡</a>
			
		</div>
		
		<script type="text/javascript">
			//自定义事件修饰符
			Vue.config.keyCodes.a = 13
			var vm = new Vue({
				el:"#app",
				data:{
					msg:"hello world!",
					uname:"name",
					password:'pass',
					year:2019,
					html: '<h1>123456</h1>',
					nmane:123,
					is: true,
					son:'son'
				},
				methods: {
					fun(){
						console.log(111);
						console.log(this.year);
					},
					zi(){
						console.log("我是子元素");
					},
					fu(){
						
						console.log("我是父元素");
					},
					send(){
						
					},
					code(event){
						console.log(event.keyCode);
					}
					
				
						
						
				}	
			})
			

		
		</script>
	</body>
</html>